import { useUpdate } from "ahooks";
import { useRef } from "react";
import { useForm } from "../../framework/common/context/metadata-context";
import eventBus, { useSubscribe } from "../../framework/common/eventBus";

export default function OperationArea() {
  const updater = useUpdate();
  const rectRef = useRef();
  const areaRectRef = useRef(); //画布根节点区域
  const areaRef = useRef(); //画布根节点
  const optionsRef = useRef(); //操作的元素相关信息
  const { data: tplData } = useForm();
  //绘制删除区域
  useSubscribe("drawLayer", (rect, options) => {
    if (rect) {
      optionsRef.current = options;
      rectRef.current = rect;
      areaRectRef.current = areaRef.current.getBoundingClientRect();
      updater();
    }
  });

  //删除绘制区域
  useSubscribe("clearLayer", (group) => {
    rectRef.current = null;
    updater();
  });
  let dom = null;

  function handleClick() {
    //如果是分组
    if (optionsRef.current?.type === "group") {
      let group = optionsRef.current.group;
      tplData.hideInfo.delete_group_arr.push(group.id || group.code);
      eventBus.publish(`group.update.${group.id || group.code}`);
    }
    //如果是主表字段
    else if (optionsRef.current?.type === "cell-main") {
      let group = optionsRef.current.group;
      let code = optionsRef.current.cell?.data?.[0]?.code;
      tplData.hideInfo.delete_field_arr.push(code);
      eventBus.publish(`group.update.${group.id || group.code}`);
    } else if (optionsRef.current?.type === "cell-children") {
      let group = optionsRef.current.group;
      let code = `${group.code}.${optionsRef.current.cell.code}`;
      tplData.hideInfo.delete_col_arr.push(code);
      eventBus.publish(`group.update.${group.code}`);
    } else if (optionsRef.current?.type === "cell-colspan-children") {
      let group = optionsRef.current.group;
      optionsRef.current.cells.forEach((cell) => {
        let code = `${group.code}.${cell.code}`;
        tplData.hideInfo.delete_col_arr.push(code);
        eventBus.publish(`group.update.${group.code}`);
      });
    } else if (optionsRef.current?.type === "relation-header") {
      tplData.hideInfo.deteleRelationGroup = true;
      eventBus.publish("relation.update")
    }
    else if (optionsRef.current?.type === "relation-item") {
      tplData.hideInfo.detele_relation_arr.push(optionsRef.current?.id)
      eventBus.publish("relation.update")
    }
    rectRef.current = null;
    updater();
  }
  if (rectRef.current) {
    //需要删除的区域
    let bStyle = {
      width: rectRef.current.width,
      height: rectRef.current.height,
      left: rectRef.current.left - areaRectRef.current.left,
      top: rectRef.current.top - areaRectRef.current.top,
    };
    dom = (
      <div className="absolute bg-transparent border border-dashed border-blue-30 " style={bStyle}>
        <div className="absolute inset-0 bg-green-200 opacity-20"></div>
        <span
          onClick={handleClick}
          onMouseLeave={(e) => {
            rectRef.current = null;
            updater();
          }}
          className="absolute z-50 block cursor-pointer pointer-events-auto icon-zhongzhi1 iconfont text-red -right-0 -top-1"
        ></span>
      </div>
    );
  }

  return (
    <div
      onMouseLeave={() => {
        rectRef.current = null;
        updater();
      }}
      ref={areaRef}
      className="absolute inset-0 z-50 pointer-events-none select-none"
    >
      {dom}
    </div>
  );
}
